<template>
  <div>
    <!-- 今日榜单音乐列表 -->
    <!-- 点击今日榜单的更多数据，跳转到更多页面，并且标题显示今日榜单，列表显示今日榜单的列表数据 -->
    <MusicList title="今日榜单" :type="2"></MusicList>
    <!-- 新歌速递音乐列表 -->
    <MusicList title="新歌速递" :type="1" :size="3"></MusicList>
    <!-- 轮播图的部分 -->
    <van-swipe class="my-swipe" indicator-color="white">
      <van-swipe-item>
        <img src="../assets/img/b1.jpg" alt="背景图" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/img/b2.jpg" alt="背景图" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/img/b3.jpg" alt="背景图" />
      </van-swipe-item>
    </van-swipe>
    <!-- 音乐榜单 -->
    <MusicRank></MusicRank>
    <!-- 热门歌单音乐列表 -->
    <MusicList title="热门歌单" :type=24></MusicList>
  </div>
</template>

<script>
// 怎么在page中引入自定义component
// 引入组件
import MusicList from "@components/MusicList.vue";
import MusicRank from "@components/MusicRank.vue";
// 注册

import http from "../api/http";

export default {
  created() {
    // ajax  怎么解决的异步问题？ 回调函数
    // axios 怎么解决异步问题的？ Promise
    // http.get(
    //   // "http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=6"
    //   "/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=6"
    // ).then(res=>{
    // })

    //   http.get(
    //   // "http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=6"
    //   "/resful/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=6"
    // ).then(res=>{
    // })

    // http.get(
    //   "/api/shop/shopGoods/open/hot/list"
    // ).then(res=>{
    // })

    // // 加载今日榜单数据
    // http
    //   .get(
    //     "/api/v1/restserver/ting?method=baidu.ting.billboard.billList&type=2&size=6&offset=0"
    //   )
    //   .then(res => {
    //     // 拿到数据
    //     // 将数据渲染出来
    //     this.todayMusicList = res.song_list;
    //   });

    // // 加载新歌速递
    // http
    //   .get(
    //     "/api/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=3&offset=0"
    //   )
    //   .then(res => {
    //     // 拿到数据
    //     // 将数据渲染出来
    //     this.newMusicList = res.song_list;
    //   });


    // // 加载热歌榜
    // http
    //   .get(
    //     "/api/v1/restserver/ting?method=baidu.ting.billboard.billList&type=24&size=6&offset=0"
    //   )
    //   .then(res => {
    //     // 拿到数据
    //     // 将数据渲染出来
    //     this.hotMusicList = res.song_list;
    //   });
  },
  data() {
    return {
      todayMusicList: [],
      newMusicList:[],
      hotMusicList:[]
    };
  },
  components: {
    MusicList,
    MusicRank
  }
};
</script>

<style lang="less" scoped>
// 设置样式的时候，多个组件之间的样式命名可能会冲突，会导致样式覆盖或者相互影响的问题。
// 这个时候我们可以通过设置scored属性来控制样式的作用域

.my-swipe .van-swipe-item {
  img {
    width: 100%;
    display: block;
  }
}

.music-list-container {
  background: red;
}
</style>